﻿<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8">
	<title>Retina Dashboard</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="/static/css/style.css" media="all" />
	<!--[if IE]><link rel="stylesheet" href="/static/css/ie.css" media="all" /><![endif]-->
	<!--[if lt IE 9]><link rel="stylesheet" href="/static/css/lt-ie-9.css" media="all" /><![endif]-->
    <script src="/static/js/jquery-1.10.1.min.js"></script>
    <!--<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->
    <script src="/static/js/jquery.wysiwyg.js"></script>
    <script src="/static/js/jquery.checkbox.min.js"></script>

    <script src="/static/js/jquery.tablesorter.min.js"></script>
    <script src="/static/js/highcharts.js"></script>
</head>
<body>
<div class="testing">
<header class="main">
	<h1><strong>Retina</strong> Dashboard</h1>
	<!--<input type="text" value="search" />-->
</header>
<section class="user">
	<div class="buttons">
		<span class="button blue"><a href="/admin/login_out/{{.tel}}">登出</a></span>
	</div>
</section>
</div>
<nav>
	<ul>
		<li class="section"><a href="/admin/index/{{.tel}}"><span class="icon">&#128711;</span> 设备监控</a></li>
		<li><a href=/admin/admin_list/{{.tel}}><span class="icon">&#128101;</span> 管理员 </a></li>
		<li>
			<a href="/admin/sys_setting/{{.tel}}"><span class="icon">&#9881;</span>系统设置</a>
		</li>
        <li>
            <a href="/admin/show_remote_list/{{.tel}}"><span class="icon">&#9881;</span>显示遥控数据</a>
        </li>
        <li>
            <a href="/admin/add_remote_data/{{.tel}}"><span class="icon">&#9881;</span>添加遥控数据</a>
        </li>
        <li>
            <a href="/admin/app_list/{{.tel}}"><span class="icon">&#9881;</span>app版本管理</a>
        </li>
	</ul>
</nav>


<section class="topcontent">
	<section class="widget">
		<header>
			<span class="icon">&#128200;</span>
			<hgroup>
				<h1>设备监控</h1>
			</hgroup>
		</header>
        <div id="container" style="width:100%; height:400px;"></div>
    </section>
</section>


<script type="text/javascript">

$(function () {
	    var options = {
	    title: {
            text: '在线设备',
            x: -20 //center
        },
        yAxis: {
            title: {
                text: '设备数量 (个)'
            }
        },
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{name: '在线设备',data:[]}]
    };
function  getData(){//http://devices.coffee-time.cn:8080/admin/api/online_devices/{{.tel}}
    	$.getJSON('http://'+window.location.host+'/admin/api/online_devices/{{.tel}}', function(data) {
                if(options.series[0].data.length > 30){
                        options.series[0].data.splice(0,1);
                        options.series[0].data.push(data.length);
                }else{
                          options.series[0].data.push(data.length);

                }

        	var chart = new Highcharts.Chart(options);
    	});
	};
$(document).ready(function() {

	getData()
	var interval = setInterval(getData, 1000);
	

});
    });
 </script>
</body>
</html>